<template>
    <div>
        <el-dialog center :before-close="close" :title="info.win ? '添加角色' : '编辑角色'" :visible.sync="info.isShow">
            <el-form :model="roleAdd" ref="roleForm" :rules="rules">
                <el-form-item label="角色名称" prop="rolename" :label-width="formLabelWidth">
                    <el-input v-model="roleAdd.rolename" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="角色权限" :label-width="formLabelWidth">
                    <el-tree check-strictly :data="menuList" show-checkbox default-expand-all node-key="id" ref="tree"
                        highlight-current :props="{
                            children: 'children',
                            label: 'title'
                        }">
                    </el-tree>
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth">
                    <!-- 开关 -->
                    <el-switch v-model="roleAdd.status" active-color="#13ce66" inactive-color="#ff4949"
                        :active-value="1" :inactive-value="2">
                    </el-switch>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="close">取 消</el-button>
                <el-button @click="confirm" type="primary">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
// 引入封装好的接口
import { roleAdd, roleInfo, roleEdit } from '../../request/api'
// 辅助性函数
import { mapActions, mapGetters } from 'vuex'
export default {
    props: ['info'],
    data() {
        return {
            formLabelWidth: '120px',
            value: true,
            roleAdd: {
                rolename: '',
                menus: '',
                status: 1
            },
            rules: {
                rolename: [
                    { required: true, message: '请输入角色名称', trigger: 'blur' },
                    { min: 2, max: 6, message: '长度在 2 到 6 个字符', trigger: 'blur' }
                ],
            }
        };
    },
    computed: {
        ...mapGetters({
            menuList: 'menu/getMenuList'
        })
    },
    mounted() {
        // 如果菜单列表没有数据就重新调用菜单列表接口
        // 有数据就不会进行交互
        if (this.menuList.length == 0) {
            this.getMenuList()
        }
    },
    methods: {
        // 获取一条信息，用于编辑使用
        // 调用角色查询接口
        getInfo(id) {
            console.log(id, 'idididididididi');
            roleInfo({ id })
                .then(res => {
                    console.log(res, '查询的一条信息');
                    // 数据回显
                    this.roleAdd = res.list
                    this.$refs.tree.setCheckedKeys(this.roleAdd.menus?this.roleAdd.menus.split(','):[]);
                    // 因为编辑接口的需要，给角色信息增加一个id属性
                    this.roleAdd.id = id
                })
        },
        // 角色列表
        ...mapActions({
            getRoleList: 'role/getRoleListAction',
            // 菜单列表
            getMenuList: 'menu/changeMenuListAction'
        }),
        // 取消事件
        close() {
            this.$emit('close', false)
            // 清空校验, 重置
            this.$refs.roleForm.resetFields()
            //清空tree结构的选择状态
            this.$refs.tree.setCheckedKeys([]);
        },
        // 确定事件
        confirm() {
            this.$refs.roleForm.validate(flag => {
                console.log(flag);
                if (flag) {
                    // 验证成功
                    console.log(this.roleAdd, '成功');
                    // 获取menus 角色权限
                    console.log(this.$refs.tree.getCheckedKeys());
                    // 改变menus格式为字符串形式
                    this.roleAdd.menus = this.$refs.tree.getCheckedKeys() ? this.$refs.tree.getCheckedKeys().join(',') : ''
                    if (this.info.win) {
                        // 调用添加角色接口
                        console.log(this.roleAdd.menus);
                        // 调用添加接口
                        roleAdd(this.roleAdd)
                            .then(res => {
                                console.log(res, '角色添加接口响应');
                                if (res.code == 200) {
                                    this.$message.success(res.msg)
                                    // 关闭弹窗并重置信息
                                    this.close()
                                    // 更新列表
                                    this.getRoleList()
                                } else {
                                    this.$message.error(res.msg)
                                }

                            })
                    } else {
                        //调用编辑角色接口
                        console.log('编辑');
                        roleEdit(this.roleAdd)
                            .then(res => {
                                console.log(res, '角色编辑接口响应');
                                if (res.code == 200) {
                                    this.$message.success(res.msg)
                                    // 关闭弹窗并重置信息
                                    this.close()
                                    // 更新列表
                                    this.getRoleList()
                                } else {
                                    this.$message.error(res.msg)
                                }

                            })
                    }
                } else {
                    // 验证失败
                    console.log('失败');
                }
            })
        }
    }
};
</script>

<style  lang="" scoped>

</style>
